<template>
	<div class="m-hm">
		<!-- 公共组件 -->
		<base-header :title="tit"/>					

		<!-- 动态组件 -->
		<button v-for="item in tabs" :key="item.id" class="tab-button" :class="{active: item == currentTab}" @click="currentTab = item">{{item}}</button>
    <keep-alive>
      <component :is="currentTabComponent"></component>
    </keep-alive>

    <!-- 访问子组件实例 -->
    <ref-modudel ref="refModudel"/>
    <button @click="ff">focus</button>

    <!-- 自定义指令 -->
    <input type="text" v-focus>
	</div>
</template>

<style lang="less">
@import "../less/home/home.less";
button {
  outline: none;
}
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
.posts-tab {
  display: flex;
}
.posts-sidebar {
  max-width: 40vw;
  margin: 0;
  padding: 0 10px 0 0;
  list-style-type: none;
  border-right: 1px solid #ccc;
}
.posts-sidebar li {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.posts-sidebar li:hover {
  background: #eee;
}
.posts-sidebar li.selected {
  background: lightblue;
}
.selected-post-container {
  padding-left: 10px;
}
.selected-post > :first-child {
  margin-top: 0;
  padding-top: 0;
}
</style>

<script>
import tabArchive from "../components/tab-archive.vue";
import tabPosts from "../components/tab-posts.vue";
import refModudel from "../components/ref_module.vue"
export default {
  name: "home",
  data() {
    return {
      tit: "home",
      currentTab: 'Posts',
      tabs: ['Posts', 'Archive']
    };
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  },
  methods: {
    ff(){
      this.$refs.refModudel.focus();
      console.log(this.$refs.refModudel.mes)
    }
  },
  mounted(){
    // console.log(this.$children);
  },
  directives: {
    focus: {
      inserted:(el, binding, vnode)=>{
        el.focus();
        //console.log(JSON.stringify(binding.value))
      }
    }
  },
  components: {
    tabArchive, 
    tabPosts,
    refModudel
  }
};
</script>